<script setup>
import { Tabbar, TabbarItem } from "vant";
import { ref, watch } from "vue";
import { useRoute } from "vue-router";

const route = useRoute();

const isShowNav = ref(true);

watch(route, (v) => {
  if (v.meta.hideNav) {
    isShowNav.value = false;
  } else {
    isShowNav.value = true;
  }
});
</script>

<template>
  <router-view></router-view>

  <tabbar
    v-show="isShowNav"
    route
    active-color="rgb(0,170,245)"
    style="border-top: 1px solid rgba(128, 128, 128, 0.304)"
  >
    <tabbar-item icon="wap-home" :to="{ name: 'Home' }">主页</tabbar-item>
    <tabbar-item icon="play-circle" :to="{ name: 'List' }"
      >我的题库</tabbar-item
    >
    <tabbar-item icon="location" :to="{ name: 'Cart' }">我的课程</tabbar-item>
    <tabbar-item icon="manager" :to="{ name: 'User' }">我</tabbar-item>
  </tabbar>
</template>

<style scoped></style>
